<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-tabs>
        <el-tab-pane label="角色管理" name="first">
          <el-row :gutter="10">
            <el-button type="primary" @click="editRole(undefined)">新增角色</el-button>
          </el-row>
          <el-table
            :data="list"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              width="180"
            />
            <el-table-column
              label="角色描述"
              prop="description"
              width="180"
            />
            <el-table-column
              label="描述"
              prop="name"
              width="200"
            />
            <el-table-column
              label="操作"
              prop="address"
            >
              <template #default="{row}">
                <el-button size="mini" type="success" @click="assignPermission(row.id)">分配权限</el-button>
                <el-button size="mini" type="primary" @click="editRole(row.id)">编辑</el-button>
                <el-button size="mini" type="danger" @click="delrole(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row :gutter="10" align="center" justify="center" style="height: 60px;" type="flex">
            <el-pagination
              :current-page="page.page"
              :page-size="page.pagesize"
              :total="total"
              background
              layout="total,prev, pager, next"
              @current-change="pagechangeFn"
            />
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-alert
            :title="title"
            show-icon
            type="info"
          />
          <el-form :label-position="labelPosition" :model="formLabelAlign" disabled label-width="80px">
            <el-form-item label="公司名称">
              <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="formLabelAlign.companyAddress" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="formLabelAlign.mailbox" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="formLabelAlign.remarks" type="textarea" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :visible.sync="showDialog"
      title="编辑角色"
      @close="close"
    >
      <el-form
        ref="form"
        :model="roleFormData"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="角色" prop="name">
          <el-input v-model="roleFormData.name">你好</el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="roleFormData.description">你好</el-input>
        </el-form-item>
      </el-form>
      <template #footer>

        <el-row :gutter="10" justify="center" type="flex">
          <el-button type="info" @click="close">取消</el-button>
          <el-button type="primary" @click="subimit">确定</el-button>
        </el-row>
      </template>
    </el-dialog>
    <!-- 权限分配弹层 -->
    <el-dialog title="权限分配" :visible="showPermissionDialog" @close="closeDialog">
      <el-tree ref="treeRef" :data="permData" node-key="id" show-checkbox check-strictly default-expand-all :props="defaultProps" :default-checked-keys="defaultPermissionIds" />
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button type="info" @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="btnOk">确定</el-button>
        </el-row>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import { addroles, delroleApi, getCompaneInfo, getroleDetail, getroleList, xiugairoleDetail, assignPrem } from '@/api/settings'
import { mapGetters } from 'vuex'
import { getPermission } from '@/api/permission'
import { getdataTree } from '@/utils/gettree'

export default {
  data() {
    return {
      assignId: '',
      defaultPermissionIds: [],
      defaultProps: { label: 'name' },
      permData: [],
      showPermissionDialog: false,
      roleFormData: { name: '', description: '' },
      showDialog: false,
      list: [],
      labelPosition: 'right',
      title: '对公司名称.公司地址.营业执照.公司地区的更新.将使得公司资料被重新审核,请谨慎修改',
      formLabelAlign: {},
      page: {
        page: 1,
        pagesize: 4
      },
      total: 1,
      rules: { name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }] }

    }
  },
  computed: {
    ...mapGetters['companyId']
  },
  created() {
    this.getrole()
    this.getcompanyInfo()
  },
  methods: {
    // 弹层提交
    async btnOk() {
      await assignPrem({ permIds: this.$refs.treeRef.getCheckedKeys(), id: this.assignId })
      this.$message.success('角色权限分配成功')
      this.showPermissionDialog = false
    },
    // 关闭权限弹层
    closeDialog() { this.showPermissionDialog = false },
    // 分配权限弹窗 获取所有权限和当前角色拥有权限并默认勾选
    async assignPermission(id) {
      this.assignId = id
      this.permData = getdataTree(await getPermission(), '0')
      this.showPermissionDialog = true
      const { permIds } = await getroleDetail(id)
      this.defaultPermissionIds = permIds
    },
    async editRole(id) {
      if (id) {
        const res = await getroleDetail(id)
        this.roleFormData = res
      }
      this.showDialog = true
    },
    async getrole() {
      const res = await getroleList(this.page)
      this.list = res.rows
      this.total = res.total
    },
    // 页码改变切换并渲染页面
    pagechangeFn(page) {
      this.page.page = page
      this.getrole()
    },
    async getcompanyInfo() {
      const res = await getCompaneInfo(this.companyId)
      this.formLabelAlign = res
    },
    async delrole(id) {
      const len = this.list.length
      await this.$confirm('确定需要删除吗?')
      await delroleApi(id)
      if (len === 1 && this.page.page > 1) {
        this.page.page--
      }
      await this.getrole()
      this.$message.success('删除成功')
    },
    // 提交逻辑
    async subimit() {
      this.$refs.form.validate()
      if (this.roleFormData.id) {
        await xiugairoleDetail(this.roleFormData)
      } else {
        await addroles(this.roleFormData)
      }
      await this.getrole()
      this.$message.success(this.roleFormData.id ? '编辑成功' : '新增成功')
      this.close()
    },
    async close() {
      this.roleFormData = { name: '', description: '' }
      this.$refs.form.resetFields()
      this.showDialog = false
    }
  }
}
</script>

<style>
.el-form {
  margin: 50px 0 0 50px;
  width: 500px;
}
</style>
